import React, { useEffect, useState } from 'react'
import { Row, Col, Input, Button, Checkbox, Divider, Table, Tag } from 'antd'
import axios from 'axios'
type Props = {}

interface ListItemState {
	"title": string,
	'key': string,
	'datetime': string,
	'isPerfect': boolean,
	'score|1-5': number,
	'collect|10-200': number,
	'type|3-5': ListItemTypeState[]
}

type nameType = '数码' | '电脑' | '手机' | '言情' | '玄幻' | '校园' | '衣服' | '鞋子'

interface ListItemTypeState {
	name: nameType
}


const Index = (props: Props) => {
	const [dataSource, setDataSource] = useState<ListItemState[]>([])
	const [isPerfect, setIsPerfect] = useState(false)
	const [desc, setDesc] = useState('综合')
	const [type, setType] = useState<nameType[]>([])
	const descType = ['综合', '时间', '评价', '收藏']
	const columns = [
		{
			title: 'key',
			dataIndex: 'key',
			key: 'key',
		},
		{
			title: '标题',
			dataIndex: 'title',
			key: 'title',
		},
		{
			title: '发布时间',
			dataIndex: 'datetime',
			key: 'datetime',
		},
		{
			title: '收藏数量',
			dataIndex: 'collect',
			key: 'collect',
		},
		{
			title: '评分',
			dataIndex: 'score',
			key: 'score',
		},
		{
			title: '是否精选',
			dataIndex: 'isPerfect',
			key: 'isPerfect',
			render(isPerfect: boolean) {
				return isPerfect ? '是' : '否'
			}
		},
		{
			title: '类型',
			dataIndex: 'type',
			key: 'type',
			render(type: ListItemTypeState[]) {
				return (<>
					{
						type.map((v, i) => {
							return <Tag key={i}>{v.name}</Tag>
						})
					}
				</>)
			}
		},
	]


	useEffect(() => {
		// 请求列表数据
		const getList = async () => {
			const resp = await axios({ url: '/api/list', method: 'post', data: { isPerfect, desc, type } })
			setDataSource(resp.data.data)
		}

		getList()
	}, [])

	return (
		<div>
			<div className="filter">
				<Row>
					<Col span={2}>筛选:</Col>
					<Col span={16}>
						<Input></Input>
					</Col>
				</Row>
				<Divider></Divider>

				<Row>
					<Col span={2}>排序:</Col>
					<Col span={16}>
						{
							descType.map((v, i) => {
								return <Button key={i} type={desc === v ? 'primary' : 'default'} onClick={() => setDesc(v)}>{v}</Button>
							})
						}
					</Col>
				</Row>

				<Divider></Divider>

				<Row>
					<Col span={2}>只看精选:</Col>
					<Col span={16}>
						<Checkbox checked={isPerfect} onChange={e => setIsPerfect(e.target.checked)}></Checkbox>
					</Col>
				</Row>
			</div>
			<Divider></Divider>
			<div className="content">
				<Table dataSource={dataSource} columns={columns}></Table>
			</div>
		</div>
	)
}

export default Index